import React, { useState } from 'react';

interface VideoItemProps {
    title: string;
    name: string;
    number: number;
    videoUrl: string;
    type: string;
}

const VideoItem: React.FC<VideoItemProps> = ({ title, name, number, videoUrl, type }) => {
    const [isHovered, setIsHovered] = useState(false); // 状态管理当前是否悬停
    const videoStyle: React.CSSProperties = {
        borderRadius: '6px',
    };

    return (
        <div
            style={{
                width: '210px',
                height: '370px',
                position: 'relative',
                overflow: 'hidden',
                marginTop: '4px',
                marginBottom: '10px',
                borderRadius: '6px',
                transition: 'transform 0.3s, box-shadow 0.3s',
                transform: isHovered ? 'translateY(-4px)' : 'translateY(0)', // 悬停时上移4px
                boxShadow: isHovered ? '0 4px 15px rgba(0, 0, 0, 0.5)' : 'none', // 悬停时添加阴影
            }}
            onMouseEnter={() => setIsHovered(true)} // 鼠标进入
            onMouseLeave={() => setIsHovered(false)} // 鼠标离开
        >
            <video style={videoStyle} width="200" height="300" controls >
                <source src={videoUrl} type="video/mp4" />
                您的浏览器不支持视频标签。
            </video>
            <div style={{
                position: 'absolute',
                bottom: '80px',
                left: '10px',
                color: 'white',
                backgroundColor: 'rgba(0, 0, 0, 0.5)', // 设置黑色透明背景
                padding: '5px', // 可选：增加内边距
                borderRadius: '4px' // 可选：设置圆角
            }}>
                <h4>{type}</h4>
            </div>
            <div style={{ padding: '4px' }}>
                <p>{title}</p>
                {
                    !isHovered ? '' : <p>{name} <span style={{ float: 'right' }}>浏览:{number}</span> </p>
                }
            </div>
        </div>
    );
};

export default VideoItem;